<template>
	<view >
		<view  class="pop_title" style="background-color:#dbeff7;">
			<text style="float:left;">通话录音</text>
			
			<uni-icons type="close" color="#ff0000" size="32" style="float:right;margin-right:10rpx;" @click="handleClosePlayVoice()"></uni-icons>
		</view>
		<view  class='audio' >
			<view class="flex" >
				<view v-if="show" style="width:90%;float:left;clear:both;">
					<slider style="width:100%;" @change='changeAudio' 
							activeColor='#0E7EFC' :disabled="audioDisabled"
							:min='0' :max='duration.toFixed(0)' block-size='12'
							:value='currentTime.toFixed(0)' :step='0.1'>
					</slider>
				</view>
			</view>
			<view class="flex">
				
				<view class="flex-2">
					<view class='mr-3'  @click='start'>
						<u-icon class="u-icon" name="play-circle" size="80" v-show='!status' ></u-icon>
						<u-icon class="u-icon" name="pause-circle" size="80" v-show='status'></u-icon>
					</view>
				</view>
				
				<view class='flex-2'>
					<view class='ml-3'>{{getTime(Math.round(currentTime))}}</view>
					
					<view class='ml-3'>{{getTime(Math.round(totalTime))}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,mapState
	} from "vuex";
    
    import {getVoiceFileDuration} from "@/api/voice.js";
	
	export default {
		data() {
			return {
				context: null,
				currentTime: 0,
				duration: 0,
				totalTime:0,
				status: false,
				audioDisabled:true,
				url:'',
				// url:'http://dd.yaaus.com:9072/public/upload/voice/20240112/e734e051b7094fe16ec4cecb5fdd37bf.m4a',
				title:'通话录音',
				show:true,
				
				runTime:0,
			};
		},
		props:['voiceUrl','voiceSec','voiceId'],
		computed: {
			...mapGetters(["userInfo","voiceServiceList"]),
			...mapState({
				callType: state => state.task.callType,
			})
		},
		onHide() {
			uni.$on('stop',()=> {
				this.context.stop();
				this.status = false;
			})
		},
		onUnload() {
			uni.$on('stop',()=> {
				this.context.stop();
				this.status = false;
			})
		},
		methods:{
			handleClosePlayVoice(){
				this.onPause();
                
                this.status = false;
                
                //销毁音频组件
                this.context.destroy();
				
				this.$emit('closePlayVoicePop', '');
			},
			
			start() { //点击播放
				if(this.status) {
					this.context.pause();
					this.status = !this.status;
				}else {


					// uni.$emit('stop')
                    this.onCanplay();
                    
					this.context.play();
					this.status = !this.status;
				}
			},
			onCanplay() { //进入可播放状态
				this.context.onCanplay(() => {
					console.log("播放的时长",this.context,this.context.duration);
					// this.totalTime = this.context.duration;
					// setTimeout(()=>{
					// 	this.duration = this.context.duration;
					// },1000)
					
					// let intervalID = setInterval(() => {
     //                    console.log("interval context",this.context);
     //                    if (this.context.duration !== 0) {
     //                      clearInterval(intervalID); // 清除定时器
     //                      //音频时长
     //                      console.log("duration:",this.context.duration)
     //                    }
     //                }, 500);
				})
			},
			onPause(){ //监听暂停状态
				this.context.onPause(()=>{
					console.log("点击暂停了",this.currentTime,this.context,this.context.duration,this.context.__timing,this.duration,this.totalTime);
					//调接口保存学习进度
				})
			},
			onTimeUpdate() { //音频播放进度
				 this.context.onTimeUpdate(() => {
					 console.log("播放进度",this.currentTime,this.context,this.context.duration,this.context.__timing,this.duration,this.totalTime);
					 
					 // if(this.totalTime == 0 && this.context.__timing != undefined){
						//  this.totalTime = this.context.__timing;
					 // }
					 
					 // if(this.duration == 0 && this.context.__timing != undefined){
					 // 	this.duration = this.context.__timing;
					 // }
					 
					 if (!Number.isFinite( this.context.duration)) {
                        console.log("时长不为finite");
						this.context.currentTime = Number.MAX_SAFE_INTEGER;
						this.context.currentTime = 0;
					 } else {
						 console.log("时长为finite");
						 // this.duration = this.context.duration;
						 this.currentTime = this.context.currentTime;
						 this.runTime = this.context.currentTime;
					 }
				 })
			},
			onEnded() { //播放结束
				this.context.onEnded(()=> {
					//调接口保存学习进度
	
					this.status = false;
					this.currentTime = 0;
				})
			},
			changeAudio(e) {
				let paused = this.context.paused;
				this.context.pause();
				this.context.seek(e.detail.value)
				if(!paused) {
					this.context.play();
				} 
			},
			getTime(time) {
				let h = parseInt(time / 60 /60);
				let m = parseInt(time / 60);
				let s = time % 60;
				return this.towNum(h) + ':' + this.towNum(m) + ':' + this.towNum(s);
			},
			towNum(num) {
				if(num >= 10) {
					return num;
				}else {
					return '0' + num;
				}
			},
            
            initData(){
                console.log("voiceurl",this.voiceUrl,uni.getStorageSync("userInfo"));
                let current_voice_url = this.voiceUrl;
                let voice_url = current_voice_url.replace(this.userInfo.record_path, this.userInfo.record_info);
                
                
                console.log("voice_url",voice_url);
                
                //voice_url = "/sdcard/Sounds/CallRecord/中国联通@10010_20250710174939.m4a";
                
                this.context = uni.createInnerAudioContext();
                this.context.src = voice_url;
                this.context.startTime = 0;
                this.currentTime = 0;
                
                this.onTimeUpdate();
                this.onCanplay();
                this.onPause();
                this.onEnded();
                
                // this.start();
                
                uni.$on('stop',()=> {
                	this.context.stop();
                	this.status = false;
                });
                
                //获取时长
                getVoiceFileDuration({'file_path':current_voice_url}).then(res=>{
                    console.log("getVoiceFileDuration res",res);
                    
                    this.duration = Number(res.data.data);
                    this.totalTime = Number(res.data.data);
                });
            }
		},
		watch: {
		    voiceUrl(newVal, oldVal) {
		      // 监听文本框值的改变
		      console.log("playvoice watch newVal",newVal);
			  console.log("playvoice watch oldVal",oldVal);
			  
			  if(newVal){
                  
                  this.initData();
                  
				  // console.log("voiceurl",this.voiceUrl,uni.getStorageSync("userInfo"));
				  // let current_voice_url = this.voiceUrl;
				  // let voice_url = current_voice_url.replace(this.userInfo.record_path, this.userInfo.record_info);

				  
				  // console.log("voice_url",voice_url);
				  
				  // this.context = uni.createInnerAudioContext();
				  // this.context.src = voice_url;
				  // this.context.startTime = 0;
				  // this.currentTime = 0;
				  
				  // this.onTimeUpdate();
				  // this.onCanplay();
				  // this.onPause();
				  // this.onEnded();
                  
      //             // this.start();
                  
				  // uni.$on('stop',()=> {
				  // 	this.context.stop();
				  // 	this.status = false;
				  // })
			  }
		    }
		},
	}
</script>

<style lang="scss">
	.pop_title{
		font-size:32rpx;
		width:100%;
		padding-left:2%;
		padding-right:2%;
		height:100rpx;
		font-weight: bold;
		line-height: 100rpx;
		border-bottom:#ccc 1px solid;
	}
	
	.audio {
		background: #f7f7f7;
		padding: 20rpx;
		width:100%;
		height:200rpx;

		.mr-3 {
			margin-right: 0rpx;
		}
		.flex {
			.flex-1 {
				text-align: left;
				font-size: 40rpx;
				font-weight: 400;
				margin:0 36rpx;
			}
			.flex-2 {
				font-size: 36rpx;
				margin: 0 6rpx;
				.ml-3{
					float:left;
					margin-left:15rpx;
					margin-right:15rpx;
					line-height: 80rpx;
				}
			}
		}
	}
</style>